const path = require('path');

module.exports = {
    mode: 'development', // 开发模式
    // 项目的入口文件
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|eot|woff|ttf|svg)$/, // eot|woff|ttf|svg字体文件打包
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 图片等文件的阈值，当大于这个阈值时，图片将被打包成一个文件
                            // 当小于这个阈值时，图片会以base64的形势直接被打包到js文件中
                            limit: 1024 * 120
                        }
                    }
                ]
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    "style-loader", // 将生成的css文件放入head中
                    {
                        loader: "css-loader",
                        options: {
                            // modules: true, // 是否使用css某块
                            importLoaders: 2
                        }
                    }, // 将多个css按一定规则合并生成一个css
                    "postcss-loader", // 添加css3 不同浏览器的前缀
                    "sass-loader", // scss转换成css
                ]
            }
        ]
    },
    output: {
        filename: 'bundle.js',// 打包后的js文件名
        // 打包后的文件放在哪个文件夹下(bundle)
        // __dirname:webpack.config所在的目录，bundle和webpack.config在同一目录，用于存放打包文件
        path: path.resolve(__dirname, 'bundle')
    }
};